<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盛易通云平台</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="./node_modules/axios/dist/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h1 class="title">盛易通云平台</h1>
        <p class="description">Hi，NINI欢迎使用盛易通云平台，完成注册后可以直接扫码登录</p>
        <div class="sy-input-wrap">
            <input type="text" class="sy-input-text" placeholder="请输入登录账号" id="sy-user" />
            <span class="err">6-20位字母或数字组合，至少一位大写字母</span>
        </div>
        <div class="sy-input-wrap ">
            <input type="password" class="sy-input-text" placeholder="请设置6~20位登录密码" id="pwd" />
            <img src="./images/close.png" class="sy-icon-close" />
            <img src="./images/open.png" class="sy-icon-open" />
            <span class="err">6-20位字母或数字组合，至少一位大写字母</span>
        </div>
        <div class="sy-input-wrap icon">
            <input type="password" class="sy-input-text" placeholder="请再次确认登录密码" id="repwd" />
            <img src="./images/close.png" class="sy-icon-close" />
            <img src="./images/open.png" class="sy-icon-open" />
            <span class="err">6-20位字母或数字组合，至少一位大写字母</span>
        </div>

        <div class="sy-input-wrap icon">
            <input type="text" class="sy-input-text " placeholder="请输入手机号码" id="sy-mobile" />
            <span class="err">6-20位字母或数字组合，至少一位大写字母</span>
        </div>
        <div class="sy-input-wrap">
            <input type="text" class="sy-input-text" placeholder="请输入短信验证码" id="sy-code" />
            <div id="sy-send-code" 　>发送验证码</div>
            <span class="err">6-20位字母或数字组合，至少一位大写字母</span>
        </div>
        <div class="sy-radio-wrap bn ">
            <img src="./images/radio.png" class="sy-radio" />
            <img src="./images/checked.png" class="sy-checked" id="sy-checked" />
            <p>我已阅读并同意<span class="sy-agreement">《平台注册协议及用户服务协议》</span></p>
            <span class="err-checked">请阅读</span>
        </div>


        <div class="sy-btn" id="sy-register">注册</div>
    </div>
    </div>
    <script>
        let radios = document.getElementsByClassName('sy-radio-wrap')
        for (let i = 0; i < radios.length; i++) {
            radios[i].onclick = function () {
                radios[i].classList.toggle('active')
            }
        }
        let pwds = document.getElementsByClassName("sy-icon-close")
        for (let i = 0; i < pwds.length; i++) {
            pwds[i].onclick = function () {
                pwds[i].parentNode.classList.toggle('active')
                pwds[i].previousElementSibling.setAttribute("type", "text")
            }
        }
        let opens = document.getElementsByClassName("sy-icon-open")
        for (let i = 0; i < pwds.length; i++) {
            opens[i].onclick = function () {
                opens[i].parentNode.classList.toggle('active')
                opens[i].previousElementSibling.setAttribute("type", "password")
            }
        }
        let count = 10;
        let init = null;
        let code = document.getElementById("sy-send-code")
        code.onclick = function () {
            this.innerHTML = count
            let mobile = document.getElementById('sy-mobile').value

            axios.post('https://cloudapi-wsdev.syitservice.com/oauth/resetpwd/sendSms', {
                key: mobile
            }).then(res => {
                console.log(res)
            })

            sendCode()
        }
        //注册
        let register = document.getElementById("sy-register")
        register.onclick = function () {
            let openId = window.location.search;
            let thirdId = openId.substring(openId.lastIndexOf('=') + 1, openId.length);

            //校验
            let mobile = document.getElementById('sy-mobile').value
            checkForm()
            axios.post('https://cloudapi-wsdev.syitservice.com/user/user/anonymous/register', {
                code: "123",
                mobile,
                tenantId: "T00001",
                thirdId,
                thirdType: "",
                userName: "shindouhikaru",
                userPwd: "wu123456"
            }).then(res => {

            })
        }
        //校验密码
        function checkPwd() {
            let password_reg = /^\S*(?=\S{6,})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/
            let pwd = document.getElementById('pwd')
            let repwd = document.getElementById('repwd')
            if (pwd.value !== repwd.value) {
                pwd.parentNode.classList.add("error")
            } else {
                pwd.parentNode.classList.remove("error")
            }
        }
        //校验账号
        function checkUser() {
            let user = document.getElementById('sy-user')
            let user_reg = /^[a-zA-Z0-9_-]{4,16}$/
            if (!user_reg.test(user.value)) {
                user.parentNode.classList.add("error")

            } else {
                user.parentNode.classList.remove("error")
            }
        }
        //校验手机
        function checkMobile() {
            let mobile_reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
            let mobile = document.getElementById('sy-mobile')
            if (!mobile_reg.test(mobile.value)) {
                mobile.parentNode.classList.add("error")

            } else {
                mobile.parentNode.classList.remove("error")
            }
        }
        // 检验验证码
        function checkCode() {
            let code = document.getElementById('sy-code')
            if (!code.value) {
                code.parentNode.classList.add("error")
            } else {
                code.parentNode.classList.remove("error")
            }
        }
        // 检验表单
        function checkForm() {
            let checked = document.getElementById('sy-checked')
            let pwdStatus = false;
            let mobileStatus = false;
            let codeStatus = false;
            let checkedStatus = false;
            checkPwd()
            checkUser()
            checkMobile()
            checkCode()
            if (!radios[0].className.includes("error")) {
                checked.parentNode.classList.add("error")
            } else {
                checked.parentNode.classList.remove("error")
            }
        }

        function sendCode() {
            init = setInterval(() => {
                count--
                if (count >= 0) {
                    code.innerHTML = count
                } else {
                    clearInterval(init)
                    count = 10;
                    code.innerHTML = "发送验证码"
                }
            }, 1000);
        }
    </script>
</body>

</html>